<template>
    <div class="broadcast-record">
      <div class="main-container">
        <div class="content">
          <!-- 筛选查询 -->
          <div class="filter-bar">
            <el-form :inline="true" :model="filterForm" class="filter-form">
              <el-form-item label="广播时间">
                <el-date-picker
                  v-model="filterForm.time"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="请选择时间"
                  end-placeholder="请选择时间"
                  size="small"
                  style="width: 220px"
                />
              </el-form-item>
              <el-form-item label="广播类型">
                <el-select v-model="filterForm.type" placeholder="请选择" size="small" style="width: 120px">
                  <el-option label="全部" value="" />
                  <el-option label="生活提醒" value="生活提醒" />
                  <el-option label="健康宣教" value="健康宣教" />
                  <el-option label="治疗提醒" value="治疗提醒" />
                  <el-option label="宣教指引" value="宣教指引" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-input v-model="filterForm.content" placeholder="广播内容" size="small" style="width: 160px" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" size="small" @click="onSearch">查询</el-button>
              </el-form-item>
            </el-form>
          </div>

          <!-- 广播记录列表 -->
          <div class="table-card">
            <div class="table-title">广播记录列表</div>
            <el-table :data="tableData" border style="width: 100%" header-cell-class-name="table-header">
              <el-table-column prop="type" label="广播类型" width="120" />
              <el-table-column label="广播内容">
                <template #default="scope">
                  <div v-if="scope.row.icon" class="icon-link">
                    <el-icon :size="18" :color="scope.row.iconColor"><component :is="scope.row.icon" /></el-icon>
                    <span v-html="scope.row.content"></span>
                  </div>
                  <div v-else v-html="scope.row.content"></div>
                </template>
              </el-table-column>
              <el-table-column prop="time" label="广播时间" width="120" />
              <el-table-column prop="feedback" label="反馈统计" width="100">
                <template #default="scope">
                  <span :class="scope.row.feedbackColor === 'red' ? 'feedback-red' : 'feedback-black'">{{ scope.row.feedback }}</span>
                </template>
              </el-table-column>
            </el-table>
            <div class="pagination-bar">
              <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :page-size="pageSize"
                :current-page="currentPage"
                @current-change="handlePageChange"
                small
              />
              <span class="page-input">
                <el-input v-model="inputPage" size="small" style="width: 40px; margin: 0 4px;" />
                <el-button size="small" @click="goToPage">GO</el-button>
              </span>
              <span class="page-info">共{{ total }}条</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script setup>
  import { ref } from 'vue'
  import { ChatDotRound, FolderOpened } from '@element-plus/icons-vue'
  
  const filterForm = ref({
    time: [],
    type: '',
    content: ''
  })
  
  const tableData = ref([
    { type: '生活提醒', content: '请保持室内干净，禁止在床上吸烟，大声喧哗，谢谢您的配合', time: '06-25 14:00', feedback: '23/36', feedbackColor: 'red' },
    { type: '生活提醒', content: '请保持室内干净，禁止在床上吸烟，大声喧哗，谢谢您的配合', time: '06-25 09:00', feedback: '26/36', feedbackColor: 'red' },
    { type: '缴费提醒', content: '您当前已欠费，请及时缴纳费用，以免影响您的治疗！', time: '06-25 10:00', feedback: '08/10', feedbackColor: 'red' },
    { type: '缴费提醒', content: '您当前已欠费，请及时缴纳费用，以免影响您的治疗！', time: '06-24 10:00', feedback: '05/10', feedbackColor: 'red' },
    {
      type: '治疗提醒',
      icon: ChatDotRound,
      iconColor: '#13ce66',
      content: '请在上午10点之前的输液科测血糖，检查前务必保持空腹！<br><a href="#">XX检验宣教</a>',
      time: '06-25 07:00',
      feedback: '09/12',
      feedbackColor: 'red'
    },
    { type: '治疗提醒', content: '请在睡前20分钟注意换吸痰器！', time: '06-24 20:00', feedback: '06/06', feedbackColor: 'black' },
    {
      type: '宣教指引',
      icon: FolderOpened,
      iconColor: '#ff9900',
      content: '<a href="#">入院流程</a><br><a href="#">入院流程相关事项</a>',
      time: '06-23 10:00',
      feedback: '03/03',
      feedbackColor: 'black'
    },
    {
      type: '健康宣教',
      icon: FolderOpened,
      iconColor: '#ff9900',
      content: '<a href="#">XX检验宣教</a>',
      time: '06-23 08:00',
      feedback: '03/03',
      feedbackColor: 'black'
    },
    { type: '治疗提醒', content: '请在3餐前不超过15分钟注意换吸痰器！', time: '06-22 18:00', feedback: '09/09', feedbackColor: 'black' }
  ])
  
  const total = ref(12)
  const pageSize = ref(9)
  const currentPage = ref(1)
  const inputPage = ref('1')
  
  function onSearch() {
    // 这里可以对接后端接口
    console.log('搜索', filterForm.value)
  }
  
  function handlePageChange(page) {
    currentPage.value = page
    inputPage.value = String(page)
  }
  
  function goToPage() {
    let page = parseInt(inputPage.value)
    if (page > 0 && page <= Math.ceil(total.value / pageSize.value)) {
      currentPage.value = page
    }
  }
  
  function logout() {
    alert('退出登录')
  }
  </script>
  
  <style scoped>
  .broadcast-record {
    min-height: 100vh;
    background: #f7fafd;
  }
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 56px;
    background: #fff;
    border-bottom: 1px solid #e4e7ed;
    padding: 0 32px 0 0;
  }
  .logo {
    display: flex;
    align-items: center;
    font-size: 18px;
    font-weight: bold;
    color: #409EFF;
    padding-left: 18px;
  }
  .logo-icon {
    width: 28px;
    margin-right: 8px;
  }
  .header-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .user-name {
    color: #666;
    font-size: 14px;
  }
  .logout-btn {
    color: #409EFF;
    font-size: 14px;
    margin-left: 8px;
  }
  .main-container {
    display: flex;
    min-height: calc(100vh - 56px);
  }
  .sidebar {
    width: 200px;
    background: #2d8cf0;
    min-height: 100%;
    padding-top: 8px;
    border-right: 1px solid #e4e7ed;
  }
  .el-menu-vertical-demo {
    background: transparent;
    border: none;
  }
  .el-menu-vertical-demo .el-menu-item {
    height: 44px;
    font-size: 15px;
  }
  .el-menu-vertical-demo .el-menu-item.is-active {
    background: #fff !important;
    color: #409EFF !important;
    border-radius: 6px 0 0 6px;
  }
  .content {
    flex: 1;
    padding: 24px 32px 0 32px;
  }
  .filter-bar {
    background: #f5f7fa;
    padding: 12px 18px 0 18px;
    border-radius: 6px;
    margin-bottom: 12px;
  }
  .filter-form .el-form-item {
    margin-right: 18px;
    margin-bottom: 0;
  }
  .table-card {
    background: #fff;
    border-radius: 6px;
    padding: 0 0 18px 0;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
  }
  .table-title {
    font-weight: bold;
    font-size: 16px;
    padding: 16px 0 8px 18px;
    color: #333;
  }
  .table-header {
    background: #f5f7fa !important;
    font-weight: bold;
    color: #333;
    font-size: 15px;
  }
  .icon-link {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .icon-link a {
    color: #409EFF;
    text-decoration: underline;
    margin-left: 2px;
  }
  .feedback-red {
    color: #f56c6c;
    font-weight: bold;
  }
  .feedback-black {
    color: #333;
  }
  .pagination-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-top: 10px;
    gap: 8px;
  }
  .page-input {
    display: flex;
    align-items: center;
    gap: 2px;
  }
  .page-info {
    color: #888;
    font-size: 13px;
    margin-left: 8px;
  }
  </style>